<template>
    <div class="order-list">
        <!-- 订单列表 -->
        <div class="cart-list" ref="list">
            <!-- 列表查询 -->
            <el-table :data="orderInfo" border stripe :header-cell-class-name="headerBg" v-loading="loading"
                      ref="carTable" >
                <el-table-column prop="orderNumber" label="订单编号" width="80" align="center"></el-table-column>
                <el-table-column prop="userId" label="用户ID" width="70" align="center"></el-table-column>
                <el-table-column prop="count" label="商品数量" width="80" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.items.length }}
                    </template>
                </el-table-column>
                <el-table-column prop="totalPrice" label="商品总额" width="80" align="center"></el-table-column>
                <el-table-column prop="consignee" label="收件人" width="100" align="center"></el-table-column>
                <el-table-column prop="address" label="收货地址" width="120" align="center"></el-table-column>
                <el-table-column prop="telephone" label="联系方式" width="110" align="center"></el-table-column>
                <el-table-column prop="payWay" label="支付方式" width="80" align="center"></el-table-column>
                <el-table-column prop="createTime" label="订单时间" width="154" align="center"></el-table-column>
                <el-table-column prop="payStatus" label="订单状态" width="80" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="warning" size="mini" @click="orderShopDetail(scope.row)">商品 <i class="el-icon-s-goods"></i></el-button>
                        <el-button type="success" size="mini" @click="orderPay(scope.row)">付款 <i class="el-icon-mobile-phone"></i></el-button>
                        <el-button type="danger" size="mini" disabled>清除 <i class="el-icon-remove-outline"></i></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div v-if="loading">Loading...</div>
        </div>
    
        <!-- 分页查询 -->
        <div style="padding: 5px 0 20px 0; text-align: left; ">
            <el-pagination
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :current-page="pageNum"
                 :page-sizes="[5, 10, 20]"
                 :page-size="pageSize"
                 layout="total, sizes, prev, pager, next, -> , jumper"
                 :total="total">
            </el-pagination>
        </div>
        
        <!-- 商品弹窗 -->
        <el-dialog
             :title="orderTitle"
             :visible.sync="orderVisible"
             width="40%">
            <div class="updateinfo">
                <div style="display: flex;">
                    <!-- 订单数据 -->
                    <el-table class="order-table" :data="orderShop" border stripe :header-cell-class-name="headerBg">
                        <el-table-column prop="bookName" label="图书信息" width="" align="center"
                                         style="padding: 0;">
                            <template slot-scope="scope">
                                <div class="book">
                                    <div class="book-content" style="width: 100%; display: flex; flex-wrap: wrap;">
                                        <div style="margin: 2px 0 2px 0; display: flex; border: 10px solid rgb(245 245 245);">
                                            <div class="img-box-order">
                                                <img :src="require('@/' + scope.row.bookImage)" class="imgbackground">
                                            </div>
                                            <div class="book-msg-order">
                                                <div style="height: 93%;">
                                                    <p class="sales" title="书籍简介">
                                                        早安，云。<br>
                                                        时光永远不会逆行，把握好每一个属于自己的清晨，早安。<br>
                                                        学问不会与愚昧人攀亲，忧愁不会与乐观人结缘，贪婪不会与正直人见面，勇敢不会与胆小人相遇。早安！
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="bookName" label="图书名称" width="100" align="center"></el-table-column>
                        <el-table-column prop="total" label="数量" width="100" align="center"></el-table-column>
                    </el-table>
                </div>
            </div>
        </el-dialog>
        
        <!-- 付款弹窗 -->
        <el-dialog
             :title="orderPayTitle"
             :visible.sync="orderPayVisible"
             width="16%" top="30vh">
            <div class="order-code-img">
                <div class="pay-way">
                    <ol>
                        <li>
                            <el-button type="success" size="mini">
                                <span style="margin-right: 12px;">微信</span> <i class="iconfont icon-weixin"></i>
                            </el-button>
                        </li>
                        <li>
                            <el-button type="danger" size="mini">支付宝 <i class="iconfont icon-zhifubao"></i></el-button>
                        </li>
                    </ol>
                </div>
                <el-image :src="orderQrcode" style="border: 1px #d5d5d5 solid;"/>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {page, getQrcode} from "@/api/book/order";

export default {
    name: "ShopOrder",
    des: "商品订单",
    data() {
        return {
            orderInfo: [],
            params: {},
            pageNum: 1,
            pageSize: 5,
            loading: false,
            headerBg: 'headerBg',
            bookDes: '这个世界,不会偏爱任何一个不劳而获的人,当然也不会,辜负任何一个默默努力的人。',
            total: 0, // 总数
    
            orderVisible: false, // 订单关联商品弹窗
            orderShop: [], // 订单关联商品
            orderTitle: "订单商品列表",
    
            orderPayVisible: false, // 订单商品付款弹窗
            orderPayTitle: "订单信息付款",
            orderQrcode: '', // 付款码
        }
    },
    created() {
        this.load()
    },
    methods: {
        // 刷新数据
        load() {
            page(this.pageNum, this.pageSize, this.params).then(res => {
                this.orderInfo = res.data.records;
                this.total = res.data.total
            }).catch(() => this.loading = false)
        },
        
        // 个数
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.load()
        },
    
        // 页码
        handleCurrentChange(pageNum) {
            this.pageNum = pageNum
            this.load()
        },
        
        // 订单详细商品数据
        orderShopDetail(order) {
            this.orderShop = order.items
            this.orderTitle = order.orderNumber + " 商品列表"
            this.orderVisible = true
        },
        
        // 订单付款
        orderPay(order) {
            getQrcode(order.orderNumber).then(res => {
                this.orderQrcode = res.msg
                this.orderPayTitle = "订单【" + order.orderNumber + "】付款"
                this.orderPayVisible = true
            }).catch(err => this.orderPayVisible = false)
        }
    }
}
</script>

<style scoped>
.order-list {
    margin: 0 17.8%;
}

.order-table {
    max-height: 440px;
    overflow-y: scroll;
}

.align-footer {
    text-align: center;
}

.avatar-uploader {
    width: 80px;
    height: 80px;
    border: 1px #b6b9c1 solid;
}

.img-box {
    /*width: 200px;*/
    height: 80px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-box .imgbackground {
    width: 80px;
    height: 80px;
}

.book {
    display: flex;
    margin: 0 -10px 0 -10px
    /*margin: 0 17.8% 0 17.8%;*/
    /*width: 33%;*/
}

.book-msg {
    width: 275px;
    text-align: left;
    margin: 0 9px 0 9px;
}

.book-msg p {
    margin-top: 10px;
    line-height: 1.5;
    font-size: smaller;
}

.book-msg h5 {
    font-size: smaller;
    margin-bottom: 5px;
}

.shop-car-btn {
    padding: 4px 14px;
}

.cart {
    margin: 0 17.8%;
}

/* 订单 */
.img-box-order .imgbackground {
    width: 80px;
    height: 80px;
    margin-bottom: -6px;
}

/* 滚动条 */
/* 隐藏滚动条 */
::-webkit-scrollbar {
    width: 1px !important;
}

/* 滚动条背景颜色 */
::-webkit-scrollbar {
    background-color: #999292 !important;
}

/* 图书信息的 p样式 */
.book-msg-order {
    width: 400px;
    text-align: left;
    margin: 0 9px 0 9px;
}

.book-msg-order p {
    margin-top: 3px;
    line-height: 1.5;
    font-size: smaller;
}

/* 支付二维码 */
.order-code-img {
    display: flex;
}

.pay-way {
    width: 40%;
    padding-left: 20px;
    text-align: left;
}

.pay-way li {
    margin-bottom: 15px;
}
</style>
